<template>
  <div class="__main">
    <div class="__left">
      <itemBox title="引进外省大学生数前10来源地及占比">
        <itemLeft1 />
      </itemBox>
      <itemBox title="引进大学生数前30高校及占比" class="mt20">
        <itemLeft2 />
      </itemBox>
      <itemBox title="引进本科生人数前30高校及占比" class="mt20">
        <itemLeft3 />
      </itemBox>
      <itemBox title="引进硕博士人数前26高校及占比" class="mt20">
        <itemLeft4 />
      </itemBox>
    </div>
    <div class="__center">
      <div class="__t">
        <div class="_wrap">
          <itemCenterTop />
        </div>
        <mapChart />
      </div>
      <div class="__b">
        <itemBox title="引进大学生人数前30用人单位及占比">
          <itemCenter1 />
        </itemBox>
        <itemBox title="引进金华各高校大学生人数占比">
          <itemCenter2 />
        </itemBox>
      </div>
    </div>
    <div class="__right">
      <itemBox title="引进外地市大学生数前10来源地及占比">
        <itemRight1 />
      </itemBox>
      <itemBox title="引进大学生数前30省外高校及占比" class="mt20">
        <itemRight2 />
      </itemBox>
      <itemBox title="引进本科生人数前30省外高校及占比" class="mt20">
        <itemRight3 />
      </itemBox>
      <itemBox title="引进大学生人数前30专业及占比" class="mt20">
        <itemRight4 />
      </itemBox>
    </div>
  </div>
</template>

<script>
  import itemBox from '@/views/components/itemBox'
  import itemLeft1 from './itemLeft1'
  import itemLeft2 from './itemLeft2'
  import itemLeft3 from './itemLeft3'
  import itemLeft4 from './itemLeft4'
  import itemCenterTop from './itemCenterTop'
  import mapChart from './mapChart'
  import itemCenter1 from './itemCenter1'
  import itemCenter2 from './itemCenter2'
  import itemRight1 from './itemRight1'
  import itemRight2 from './itemRight2'
  import itemRight3 from './itemRight3'
  import itemRight4 from './itemRight4'
  export default {
    name: 'index',
    components: {
      itemBox, itemLeft1, itemLeft2, itemLeft3, itemLeft4,
      itemCenterTop, mapChart, itemCenter1, itemCenter2,
      itemRight1, itemRight2, itemRight3, itemRight4
    },
    data() {
      return {}
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .mt20 { margin-top: 20px;}
  .__main {
    padding: 0 20px; display: grid; grid-template-columns: 476px auto 476px;
    grid-gap: 20px;
    .__center {
      display: grid; grid-template-rows: 744px 228px;
      .__t {
        position: relative; padding-top: 40px;
        ._wrap { position: absolute; z-index: 2; left: 0; top: 10px;}
      }
      .__b {
        display: grid; grid-template-columns: 434px 434px;  grid-gap: 20px;
      }
    }
  }
</style>
